<template>
  <div class="bottom-charts">
    <div class="bc-chart-item">
      <div class="bcci-header">食堂</div>
      <dv-active-ring-chart :config="config1" />
      <!-- <Label-Tag :config="labelConfig" /> -->
      <div class="lable">
        <span>余额支付：{{data2.market_pay_type_data[1].pay_ic}}</span>
        <span>支付宝支付：{{data2.market_pay_type_data[1].pay_ali}}</span>
        <span>微信支付：{{data2.market_pay_type_data[1].pay_wx}}</span>
      </div>
    </div>
    <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item">
      <div class="bcci-header">菜市场</div>
      <dv-active-ring-chart :config="config2" />
      <!-- <Label-Tag :config="labelConfig" /> -->
      <div class="lable">
        <span>余额支付：{{data2.market_pay_type_data[2].pay_ic}}</span>
        <span>支付宝支付：{{data2.market_pay_type_data[2].pay_ali}}</span>
        <span>微信支付：{{data2.market_pay_type_data[2].pay_wx}}</span>
      </div>
    </div>

    <dv-decoration-2 class="decoration-2" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item">
      <div class="bcci-header">商铺</div>
      <dv-active-ring-chart :config="config3" />
      <!-- <Label-Tag :config="labelConfig" /> -->
      <div class="lable">
        <span>余额支付：{{data2.market_pay_type_data[0].pay_ic}}</span>
        <span>支付宝支付：{{data2.market_pay_type_data[0].pay_ali}}</span>
        <span>微信支付：{{data2.market_pay_type_data[0].pay_wx}}</span>
      </div>
    </div>

  </div>
</template>

<script>
// import LabelTag from './LabelTag'
export default {
  name: 'BottomCharts',
  components: {
    // LabelTag
  },
  props: ['data2'],
  data () {
    return {
      config1: {
        data: [
          {
            name: '余额支付',
            value: this.data2.market_pay_type_data[1].pay_ic
          },
          {
            name: '支付宝支付',
            value: this.data2.market_pay_type_data[1].pay_ali
          },
          {
            name: '微信支付',
            value: this.data2.market_pay_type_data[1].pay_wx
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '65%',
        activeRadius: '70%',
        showOriginValue: true
      },
      config2: {
        data: [
          {
            name: '余额支付',
            value: this.data2.market_pay_type_data[2].pay_ic
          },
          {
            name: '支付宝支付',
            value: this.data2.market_pay_type_data[2].pay_ali
          },
          {
            name: '微信支付',
            value: this.data2.market_pay_type_data[2].pay_wx
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '65%',
        activeRadius: '70%',
        showOriginValue: true
      },
      config3: {
        data: [
          {
            name: '余额支付',
            value: this.data2.market_pay_type_data[0].pay_ic
          },
          {
            name: '支付宝支付',
            value: this.data2.market_pay_type_data[0].pay_ali
          },
          {
            name: '微信支付',
            value: this.data2.market_pay_type_data[0].pay_wx
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '65%',
        activeRadius: '70%',
        showOriginValue: true
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  display: flex;
  position: relative;
  .bc-chart-item {
    width: 33.3%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    .lable{
      text-align: center;
      font-weight: bold;
      position: relative;
      top: -16px;
      span{
        margin-right: 20px;
      }
    }
  }
  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }
  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }
  .label-tag {
    height: 30px;
  }
  .active-ring-name {
    font-size: 18px !important;
  }
  .decoration-1, .decoration-2, .decoration-3 {
    display: absolute;
    left: 0%;
  }
}
</style>
